<template>
  <div>
      <van-skeleton title avatar :row="3" />
    <van-nav-bar title="详情" left-arrow @click-left="onClickLeft()">
    </van-nav-bar>
    <div class="comment-content">
      <div class="tilte-head">
        <div class="headerImg">
          <img src="static/img/gj.png" alt />
        </div>
        <span>{{list.id}}</span>
      </div>
      <div>
          <div class="comment-font">
            <span>{{list.content}}</span>
          </div>
          <div class="comment-img">
            <img v-if="flag===true" :src="list.picture" alt />
            <video v-else :src="list.vedio"></video>
          </div>
          <div class="comment-end">
            <span>型号: {{list.product.model}}</span>
            <span>{{format(list.publishTime)}}</span>
          </div>
      </div>
      <br />
      <br />
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import axios from 'axios';
export default {
  data() {
    return {
      list: [],
      index:0,
      flag:true
    };
  },
 
  mounted() {
      this.list=this.$route.query.id;
      this.index=this.$route.query.index;
      if(this.index===4){
          flag=false;
      }else{
          flag=true;
      }
      console.log(this.$route.query.index)
  },
  methods: {
    //导航守卫
    onClickLeft() {
      this.$router.push({
        name: this.$route.query.name
      });
    },
    //转换格式
    format(s) {
      //将后台传过来的valueOf格式的时间改成yyyy/m/d的格式
      const date = new Date(s),
        y = date.getFullYear(),
        m = date.getMonth() + 1,
        d = date.getDate();
      return `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`;
    },
  }
};
</script>
<style scoped>
 .van-nav-bar__content {
  height: 6rem;
}
 .van-icon-arrow-left::before {
  font-size: 2.4rem;
  color: black;
}
 .van-nav-bar__title {
  font-size: 2.3rem;
}
.headerImg {
  width: 2rem;
  height: 2rem;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  overflow: hidden;
}
.headerImg img {
  width: 100%;
  height: 100%;
}
.tilte-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.5rem;
  color: orange;
  position: relative;
  left: 1rem;
  height: 4rem;
}
.tilte-head span {
  position: relative;
  left: 1rem;
}
.comment-img {
  display: block-inline;
  flex-direction: row;
  width: 95%;
  margin: 0 auto;
  float: left;
}
.comment-img img {
  /* position: relative;
  top: 1rem; */
  width: 99%;
  margin: 1rem 1rem auto;
  height: 38rem;
  border: 1px solid gray;
  border-radius: 0.3rem;
}
.comment-font {
  width: 94%;
  margin: 0 auto;
  font-size: 1.5rem;
}
.comment-end {
  font-size: 1.3rem;
  width: 94%;
  margin: 0 auto;
  color: gray;
  position: relative;
  top: 2rem;
}
.comment-end :nth-last-child(1) {
  float: right;
}
.comment-content {
  border-bottom: 1px solid gainsboro;
  /* height: 25rem; */
  position: relative;
  top: 2rem;
}
</style>